var uploadimgheight=100;
var uploadimgwidth=100;
var fileToUpload="";
var uploadTarget=document.getElementById("drop-target");
uploadTarget.addEventListener("dragover",function(e){
	e.preventDefault();
},true);
uploadTarget.addEventListener("drop",function(e){
	e.preventDefault();
	alert(fileToUpload);
	fileToUpload=e.dataTransfer.files[0];
	loadImageIntoCanvas(fileToUpload);
},true);
function loadImageIntoCanvas(file){
	if(!file.type.match(/image.*/)){
		return;
	}
	var fr=new FileReader();
	fr.onload=function(e){
		drawimage(e.target.result);
	};
	fr.readAsDataURL(file);
}
function drawimage(fileurl){
	var img=new Image();
	img.onload=function(){
		var canvas=document.getElementById("imgcanvas");
		var twod=canvas.getContext("2d");
		if(uploadimgheight>canvas.height){
			uploadimgheight=canvas.height;
		}
		if(uploadimgwidth>canvas.width){
			uploadimgwidth=canvas.width;
		}
		twod.clearRect(0,0,canvas.width,canvas.height);
		if(img.height>uploadimgheight){
			img.width*=uploadimgheight/img.height;
			img.height=uploadimgheight;
		}
		if(img.width>uploadimgwidth){
			img.height*=uploadimgwidth/img.width;
			img.width=uploadimgwidth;
		}
		twod.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height);
	};
	image.src=fileurl;
}